<!--
 * @Author: Null
 * @Date: 2022-08-23 18:30:22
 * @Description: 首页
-->

<template>
  <div class="User">
    <!-- 第一种方式 -->
    <FirstTitle title="第一种方式--">
      <template #content> </template>
    </FirstTitle>

    <h2>第一种方式--</h2>
    <div class="User-one" flex="cross:center">
      <div class="User-one__text">
        {{ store.count }}
      </div>
      <div class="User-one__btn">
        <el-button @click="clickCount()"> 增加 </el-button>
      </div>
    </div>

    <!-- 第二种方式 -->
    <h2>第二种方式--形如mapState</h2>
    <div class="User-one" flex="cross:center">
      <div class="User-one__text">
        {{ store.count }}
      </div>
      <div class="User-one__btn">
        <el-button @click="incrementFun()"> 增加 </el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted } from "vue";
import { useCounterStore } from "@/store/element/elButton.js";

const store = useCounterStore();

onMounted(() => {
  console.log("onMounted方法执行了");
});

onUnmounted(() => {
  console.log("onUnmounted方法执行了");
});

const clickCount = () => {
  console.log("点击计数");
  store.count++;
};

const incrementFun = () => {
  console.log("增加");
  store.increment();
};
</script>

<style lang="scss" scoped>
.User {
  height: 250vh;
  &-one {
    &__text {
      font-size: 16px;
      color: #333;
      font-weight: bold;
    }
    &__btn {
      margin-left: 16px;
    }
  }
}

.container {
  width: 100px;
  height: 100px;
}
</style>
